<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户购物车总览</title>
	<link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
	<style>
		.table td {
			vertical-align: middle;
		}
	</style>
</head>
<body>
<%@include file="../resources/nav.jsp"%>
<div class="container-fluid" style="margin-top: 100px;">
	<!-- 看板 -->
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header bg-light text-center">
							电商平台销售趋势
						</div>
						<div class="card-body">
							<div class="ibox float-e-margins">
								<div class="ibox-title">
									<h5><span style="font-size: 16px;" class="label label-success">电商平台销售趋势</span></h5>
								</div>
								<div class="ibox-content">
									<div id='lineChart' style="height:300px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-1"></div>
	</div>
	<!-- 按钮组 -->
	<div class="row" style="margin-top: 20px;">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<a class="btn btn-sm btn-outline-danger" onclick="deleteMany()" href="javascript:void(0)"><i class="fa fa-trash-o"></i>删除</a>
		</div>
		<div class="col-md-1"></div>
	</div>
	<!-- 购物车列表 -->
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<c:choose>
				<c:when test="${empty requestScope.page.list}">
					<p class="text-center">您的购物车为空。</p>
				</c:when>
				<c:otherwise>
					<table class="table table-sm table-bordered table-hover">
						<thead>
						<tr class="bg-light text-center">
							<th><input type="checkbox" name="id" id="id" onclick="swapCheck()"></th>
							<th>用户名</th>
							<th>商品名</th>
							<th>商品价格</th>
							<th>数量</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach var="p" items="${requestScope.page.list}">
							<tr>
								<td class="text-center">
									<input type="checkbox" name="id" value="${p.id}">
								</td>
								<td>${p.userName}</td>
								<td>${p.productName}</td>
								<td>${p.price}</td>
								<td><input class="form-control" value="${p.num}" data-id="${p.id}" type="number" name="num" onchange="updateNum(this)"></td>
								<td>
									<a class="btn btn-sm btn-outline-danger" href="/Mall/cart/userdelete?id=${p.id}"><i class="fa fa-trash-o"></i>删除</a>
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
				</c:otherwise>
			</c:choose>
		</div>
		<div class="col-md-1"></div>
	</div>

	<!-- 分页 -->
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-6" style="text-align: center">
			<c:if test="${requestScope.page.pageNum <= 1}">
				<a href="#">上一页</a>
			</c:if>
			<c:if test="${requestScope.page.pageNum > 1}">
				<a href="/Mall/userCart/page?pageNum=${requestScope.page.pageNum - 1}&pageSize=${requestScope.page.pageSize}">上一页</a>
			</c:if>
			<c:choose>
				<c:when test="${requestScope.page.pageTotal <= 5}">
					<c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
						<c:if test="${i == requestScope.page.pageNum}">
							【${i}】
						</c:if>
						<c:if test="${i != requestScope.page.pageNum}">
							<a href="/Mall/userCart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
						</c:if>
					</c:forEach>
				</c:when>
				<c:when test="${requestScope.page.pageTotal > 5}">
					<c:choose>
						<c:when test="${requestScope.page.pageNum <= 3}">
							<c:forEach begin="1" end="5" var="i">
								<c:if test="${i == requestScope.page.pageNum}">
									【${i}】
								</c:if>
								<c:if test="${i != requestScope.page.pageNum}">
									<a href="/Mall/userCart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
								</c:if>
							</c:forEach>
						</c:when>
						<c:when test="${requestScope.page.pageNum > requestScope.page.pageTotal - 3}">
							<c:forEach begin="${requestScope.page.pageTotal - 4}" end="${requestScope.page.pageTotal}" var="i">
								<c:if test="${i == requestScope.page.pageNum}">
									【${i}】
								</c:if>
								<c:if test="${i != requestScope.page.pageNum}">
									<a href="/Mall/userCart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
								</c:if>
							</c:forEach>
						</c:when>
						<c:otherwise>
							<c:forEach begin="${requestScope.page.pageNum - 2}" end="${requestScope.page.pageNum + 2}" var="i">
								<c:if test="${i == requestScope.page.pageNum}">
									【${i}】
								</c:if>
								<c:if test="${i != requestScope.page.pageNum}">
									<a href="/Mall/userCart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
								</c:if>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</c:when>
			</c:choose>
			<c:if test="${requestScope.page.isLastPage}">
				<a href="#">下一页</a>
			</c:if>
			<c:if test="${!requestScope.page.isLastPage}">
				<a href="/Mall/userCart/page?pageNum=${requestScope.page.pageNum + 1}&pageSize=${requestScope.page.pageSize}">下一页</a>
			</c:if>
		</div>
		<div class="col-md-3"></div>
	</div>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入百度Echarts -->
<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 折线图
	var myChart = echarts.init(document.getElementById('lineChart'));
	//准备数据
	var saleNum="${saleNum}";
	saleNum =saleNum.substr(1,saleNum.length-2).split(',')
	var visitNum="${visitNum}";
	visitNum =visitNum.substr(1,visitNum.length-2).split(',');
	// 指定图表的配置项和数据
	option = {
		title: {
			text: ''
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['销售量', '访问量']
		},
		toolbox: {

		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月','11月','12月']
		}],
		yAxis: [{
			type: 'value',
			axisLabel: {
				formatter: '{value} 次'
			}
		}],
		series: [

			{
				name: '销售量',
				type: 'line',
				stack: '总量',
				areaStyle: {
					normal: {}
				},
				data: saleNum
			},
			{
				name: '访问量',
				type: 'line',
				stack: '总量',
				areaStyle: {
					normal: {}
				},
				data: visitNum
			}
		]
	};
	myChart.setOption(option);

	// 购物车数量更新
	function updateNum(e) {
		let num = $(e).val();
		let id = $(e).data("id");
		if(num>0){
		$.ajax({
			url: '/Mall/cart/updateNum',
			type: 'POST',
			data: {
				id: id,
				num: num
			},
			success: function (res) {
				console.log(res);
			}
		});}
		else{
			$.ajax({
			url: "/Mall/cart/userdelete",
			type: "POST",
			data: {
				id:id
			},
			success: function() {
				location.reload();
			}
		});

		}
	}

	// 全选/取消全选
	var isCheckAll = true;
	function swapCheck() {
		if (isCheckAll) {
			$("input[type='checkbox']").each(function() {
				this.checked = true;
			});
			isCheckAll = false;
		} else {
			$("input[type='checkbox']").each(function() {
				this.checked = false;
			});
			isCheckAll = true;
		}
	};


	function deleteMany(){
		let id=null;
		$("input[type='checkbox']").each(function() {
			if(this.checked === true){
				id=this.value;
				console.log(id);
				$.ajax({
					url:"/Mall/cart/userdelete?id="+id,
					type:"POST",
					success:function (){
						<%--location.replace("/Mall/product/page?pageNum=1&pageSize=${requestScope.page.pageSize}");--%>
						location.reload();
					}
				})
			}
		});

	};

</script>
</body>
</html>